<template>
    <div class="boxcard">
        <el-row >
            <el-col :span="20">
                <span class="text">Cards</span>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="12" :md="{span:6}" >
                <div class="EARNINGS">
                    <el-row>
                        <el-col :span="18">
                            <div>EARNINGS (MONTHLY)</div>
                            <div class="number">$40</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-s-cooperation"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" :md="{span:6}">
                <div class="EARNINGS Earningsa">
                    <el-row>
                        <el-col :span="18">
                            <div>Earnings (Annual)</div>
                            <div class="number">$215,000</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon">$</div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" :md="{span:6}" >
                <div class="EARNINGS tasks">
                    <el-row>
                        <el-col :span="18">
                            <div>TASKS</div>
                            <div class="number">
                                <el-row>
                                    <el-col :span="10">50%</el-col>
                                    <el-col :span="12">
                                        <el-progress :percentage="50" style="width:80px ;margin-top: 12px;"
                                            :stroke-width="9" :show-text="false" :color="color"></el-progress>
                                    </el-col>
                                </el-row>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-notebook-2"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12"  :md="{span:6}" >
                <div class="EARNINGS tasksR">
                    <el-row>
                        <el-col :span="18">
                            <div>tasks Requests</div>
                            <div class="number">18</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-chat-dot-round"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :md="{span:12}">
                <div class="card">
                    <div class="cardtext">
                        Circle Buttons
                    </div>
                    <p>This card uses Bootstrap's default styling with no utility classes added. Global styles are the
                        only things modifying the look and feel of this default card example. </p>
                </div>
                <div class="card">
                    <div class="cardtext_two">
                        Basic Card Example
                    </div>
                    <p>The styling for this basic card example is created by using default Bootstrap utility classes. By
                        using utility classes, the style of the card component can be easily modified with no need for
                        any custom CSS! </p>
                </div>
            </el-col>
            <el-col :span="24" :md="{span:12}">
                <div class="card l_height">
                    <div class="cardtext_two">
                        <el-row>
                            <el-col :span="22">Dropdown Card Example</el-col>
                            <el-col :span="2">
                                <el-button icon="el-icon-more-outline" class="buttonborder" size="mini"
                                    @click="show_card = !show_card">
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="buttoncard " v-show="show_card">
                        Dropdown Header:
                        <el-button class="button" @click="goTop">Action</el-button>
                        <el-button class="button" @click="goTop">Another action</el-button>
                        <el-button class="button button_border" @click="goTop">something else here</el-button>
                    </div>
                    <p>Dropdown menus can be placed in the card header in order to extend the functionality of a basic
                        card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header
                        can be clicked on in order to toggle a dropdown menu. </p>
                </div>
                <div :class="showclass">
                    <div class="cardtext_two" @click="isshow">
                        <el-row>
                            <el-col :span="22">Collapsable Card Example</el-col>
                            <el-col :span="2">
                                <el-button :icon="iconname" class="buttonborder" size="mini">
                                </el-button>
                            </el-col>
                        </el-row>

                    </div>
                    <p v-if="isvisible">This is a collapsable card example using Bootstrap's built in collapse
                        functionality. Click on
                        the card header to see the card body collapse and expand! </p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { gotop,handleScroll } from "../../utils/gotop"
export default {
    name: 'cards',
    data() {
        return {
            scrollTop: "",
            isvisible: true,
            showclass: 'card',
            iconname: 'el-icon-arrow-down',
            show_card: false,
            color: '#2baf7f',
        };
    },
    methods: {
         handleScroll() {
            this.scrollTop =handleScroll()
        },
        goTop() {
            gotop(this.scrollTop)
            this.show_card = false;
            this.goTopshow = false
        },
        isshow() {
            if (this.isvisible === true) {
                this.isvisible = !this.isvisible
                this.showclass = 'noshow'
                this.iconname = 'el-icon-arrow-right'
            }
            else {
                this.isvisible = !this.isvisible
                this.showclass = 'card'
                this.iconname = 'el-icon-arrow-down'
            }

        },
    },
      mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/common.less';
.EARNINGS {
    width: 80%;
    border-left: 4px solid rgb(78, 115, 223);
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    padding: 20px 10px;
    font-size: 11.2px;
    font-weight: 700;
    color: rgb(78, 115, 223);
    margin-top: 20px;
    margin-left: 20px;

}
.Earningsa {
    border-left: 4px solid rgb(28, 200, 138);
    color: rgb(28, 200, 138);
    margin-top: 20px;
}

.atext {
    color: rgb(78, 115, 223);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none
}

.tasks {
    border-left: 4px solid rgb(54, 185, 204);
    color: rgb(54, 185, 204);
    margin:20px ;
}

.tasksR {
   width: 80%;
    border-left: 4px solid rgb(246, 194, 62);
    color: rgb(246, 194, 62);
    margin:20px ;
}

.number {
    margin: 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: rgb(90, 92, 105);
}

.icon {
    color: rgb(221, 223, 235);
    font-size: 40px;
}

.card {
    width: 90%;
    height: 180px;
    margin-left: 20px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    margin-top: 25px;

}

.noshow {
    width: 485px;
    height: 50px;
    margin-left: 20px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    margin-top: 25px;
}

.cardtext {
    height: 20px;
    color: rgb(133, 135, 150);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    background-color: rgb(248, 249, 252);
    padding: 15px;
    border-bottom: 1px solid rgba(207, 207, 207, 0.4);
}

.cardtext_two {
    height: 20px;
    color: rgb(78, 115, 223);
    font-size: 16px;
    font-weight: 600;
    line-height: 19.2px;
    background-color: rgb(248, 249, 252);
    padding: 15px;
    border-bottom: 1px solid rgba(207, 207, 207, 0.4);
}

p {
    padding: 0 15px;
    color: rgb(136, 139, 157);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    position: absolute;
    width: 450px;
    z-index: 10,
}

.l_height {
    height: 220px;
}

.buttonborder {
    border: 0px !important;
}

.buttoncard {
    width: 180px;
    height: 150px;
    background-color: rgb(254, 254, 254);
    border: 0px solid rgb(136, 139, 157);
    margin-top: -15px;
    margin-left: 280px;
    border-radius: 5px;
    position: absolute;
    box-shadow: 0px 0px 5px 5px rgba(232, 232, 232, 0.4);
    z-index: 11;
    text-align: center;
    color: rgb(183, 185, 204);
    font-size: 11px;
    font-weight: 800;
    line-height: 25px;
}

.button {
    color: rgb(95, 96, 104);
    border: 0;
    width: 150px;
    text-align: left;
    margin-left: 0px !important;
}

.button_border {
    border-top: 1px solid rgb(216, 216, 226);
    border-radius: 0px;
}
</style>